<template>
  <div>
    <div class="header">
      <span class="title">速 讯</span>
      <div class="user">
        <span>{{username}}，您好</span>
        <img src="../assets/head.jpg" alt="">
        <span class="exit" @click="handleExit">退出登录</span>
      </div>
    </div>
    <div class="wrapper">
      <div class="nav-menu">
        <el-menu
          style="height: 100%"
          default-active="1"
          class="el-menu-vertical-demo"
          @select="handleSelect">
          <el-menu-item index="1">
            <i class="el-icon-news"></i>
            <span slot="title">统计</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-tickets"></i>
            <span slot="title">通讯录</span>
          </el-menu-item>
          <el-menu-item index="3" >
            <i class="el-icon-plus"></i>
            <span slot="title">添加联系人</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">个人中心</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="main-content">
        <router-view/>
      </div>
    </div>
  </div>



</template>

<script>
    export default {
        name: "index",
        data() {
            return {
              username:JSON.parse(window.localStorage.getItem('logInfo')).username
            }
        },
        methods: {
          handleSelect(index){
            switch (index) {
              case '1':
                return this.$router.push('/index/statistics')
                    // break;
              case '2':
                return this.$router.push('/index/mail')
                    // break;
              case '3':
                return this.$router.push('/index/addContact')
                    // break;
              case '4':
                return this.$router.push('/index/mine')
                    // break;
              default:
                return this.$router.push('/index')
                    // break;
            }
          },
          handleExit(){
            this.$router.push('/');
          }
        },
        computed: {},
        components: {},
        mounted() {
        }
    }
</script>

<style  lang="less" scoped>
  .header{
    height: 7vh;
    width: 100%;
    background-color:#ECEFF4 ;
    border-bottom: 1px solid #e6e6e6;
    line-height:7vh;
    display: flex;
    .title{
      flex: 1;
      font-family :YouYuan;
      color:#0F88EB;
      font-size:36px;
    }
    .user{
      flex: 1;
      text-align: right;
      margin: auto 0;
      margin-right: 15px;
      height: 100%;
      display: table-cell;
      span{
        vertical-align: middle;
        margin-right: 5px;
      }
      img{
        vertical-align: middle;
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
      .exit{
        font-size: 12px;
        color: #8b8b8b;
        cursor: pointer;
        margin-left: 15px;
      }
    }


  }
  .wrapper{
    width: 100%;
    display: flex;
    height: 93vh;
    .nav-menu{
      flex: 1;
      height: 100%;
      .is-active{
        background-color: #F8F9FB;
        border-left: 3px solid #0F88EB;
      }
      .el-menu{
        background-color:#ECEFF4 ;
        border-right: none;
      }
    }
    .main-content{
      flex: 5;
      height: 100%;
      background-color: #F8F9FB;
    }
  }


</style>
